<template>
  <div class="archives">
    <TopInner :coverImg="coverImgUrl">
      <div class="blog_title">归档</div>
    </TopInner>
    <div class="container">
      <div class="paper">
        <div class="details">共计文章100篇!</div>
        <ul style="margin-top: 20px">
          <li v-for="item in archives" :key="item.id">
            <div class="item">
              <div class="time">{{ item.time }}</div>
              <div class="title">
                <a :href="item.url">{{ item.title }}</a>
              </div>
            </div>
          </li>
          <!-- <li>
            <div class="item">
              <div class="time">2022-1-27 17:03</div>
              <a href="#" class="title">测试博客</a>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import TopInner from "../components/TopInner.vue";
export default {
  name: "Archives",
  components: {
    TopInner,
  },
  data() {
    return {
      coverImgUrl:
        "http://81.68.226.147:743/images/2022/01/27/innerBackground1.jpg",
      archives: [
        {
          id: 1,
          time: "2022-1-27 17:03",
          title: "测试博客1",
          url: "#",
        },
        {
          id: 2,
          time: "2022-1-27 17:03",
          title: "测试博客2",
          url: "#",
        },
      ],
    };
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
@media screen and (min-width: 1439.98px) {
  .paper {
    padding: 30px 50px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
  .paper {
    padding: 30px 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .paper {
    padding: 30px 20px;
  }
}
@media screen and (max-width: 767.98px) {
  .paper {
    padding: 20px 20px;
  }
}
.container {
  margin: 80px auto;
  width: 70%;
  height: 1200px;
}
.paper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.27), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.paper.dark {
  background-color: #2d2d2d;
  border: 0;
  color: #a9a9b3;
  box-shadow: 0;
  transition: all 0.8s ease;
}

.paper >>> .main p {
  font-size: 1.5rem;
  letter-spacing: 0.4rem;
}
.paper::after,
.paper::before {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 100px;
  height: 1px;
  z-index: -1;
  box-shadow: 0 2px 12px 5px rgba(0, 0, 0, 0.3);
}
.paper::after {
  left: 4px;
  transform: rotate(-6deg);
}
.paper::before {
  right: 4px;
  transform: rotate(6deg);
}
.details {
  position: relative;
  font-size: 1.8rem;
}
.details::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(0%, -50%);
  border-radius: 50%;
  background-color: #ff3f34;
}
.details li {
  width: 100%;
  height: 100%;
}

.item {
  position: relative;
  display: flex;
  width: 100%;
  height: 100px;
  flex-direction: column;
  justify-content: space-around;
}
.item::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 2px;
  height: 100px;
  transform: translate(0%, -30%);
  background-color: #bcbfc5;
}
.item::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 10%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(0%, 100%);
  background-color: #000000;
}
.time {
  display: flex;
  height: 40%;
  align-items: center;
  font-size: 0.9rem;
  color: rgb(55, 65, 74);
}
.title {
  display: flex;
  height: 60%;
  align-items: center;
  font-size: 1.1rem;
  color: #000000;
}
</style>